<!--
~  Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
~
~  Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
~
~  This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
~
~  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
~
~  You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->


<div>
    <h2 id="addNewInterfaceHeader" openlmis-message="formMessage"></h2>
</div>
<div class="app-form" id="InterfacesFormGroup">

    <form  name="interfaceForm" role="form" novalidate>
        <div class="form-row clearfix row-fluid">
            <div class="span8">
                <div class="form-cell">
                    <label id="interfaceName" class="span2" for="interfaceNameId">
                        <span openlmis-message="label.interface.name"></span>
                        <span class="label-required"> *</span>
                    </label>

                        <input type="hidden" ng-model="interface.id"/>
                        <textarea ng-model="interface.name" name="interfaceName" id="interfaceNameId"
                                  ng-required="true"></textarea>
                        <span class="field-error" ng-show="!interface.name && showParentError"
                              openlmis-message="missing.value"></span>

                </div>
            </div>
        </div>
        <div class="form-row clearfix row-fluid">
            <div class="span4">
                <div class="form-cell">
                    <label id="interfaceActiveLabel" class="span4" for="activeLabelId" openlmis-message="label.interface.active">
                    </label>
                        <input ng-model="interface.active" name="active" id="activeLabelId" type="checkbox"/>
                </div>
            </div>
        </div>
    </form>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="form-group">
                <h3 openlmis-message="link.interfaces.dataset"></h3>
                    <form role="form" name="interfaceDatasetForm" novalidate>
                        <!-- interface dataset section start -->
                        <div class="accordion-body" style="display: block;">
                            <div class="table-container">
                                <div id="interfaceDatasetTable" class="prog-role-grid">
                                    <div class="fluid-grid">
                                        <div class="row-fluid fluid-grid-header">
                                            <div class="span3">
                                                <div id="datasetNameHeader" class="fluid-grid-cell" openlmis-message="label.interface.dataset.name"></div>
                                            </div>
                                            <div class="span3">
                                                <div id="datasetIdHeader" class="fluid-grid-cell" openlmis-message="label.interface.dataset.id"></div>
                                            </div>
                                            <div class="span3">
                                                <div id="datasetIdHeader" class="fluid-grid-cell" openlmis-message="label.action"></div>
                                            </div>
                                        </div>
                                        <div class="row-fluid" ng-repeat="dataset in interface.dataSets" tab-scroll>
                                            <div class="span3">
                                                <div class="fluid-grid-cell"  ng-show="!dataset.underEdit">{{dataset.dataSetname}}</div>
                                                <div class="span12 fluid-grid-cell"  ng-show="dataset.underEdit">
                                                    <div class="position-relative">
                                                        <input type="text" id="interfaceDataSetName{{$index}}" class="input-adjusted" ng-model="dataset.dataSetname" name="interfaceDataSetName{{$index}}"  ng-required="true"/>
                                                    </div>
                                                    <span id="datasetnameerror{{$index}}" class="rnr-form-error" ng-show="!dataset.dataSetname && showError"
                                                          openlmis-message="missing.value"></span>
                                                </div>
                                            </div>
                                            <div class="span3">
                                                <div class="fluid-grid-cell" ng-show="!dataset.underEdit">{{dataset.dataSetId}}</div>
                                                <div class="span8 fluid-grid-cell"  ng-show="dataset.underEdit">
                                                    <div class="position-relative">
                                                        <input type="text" id="interfaceDataSetId{{$index}}" ng-model="dataset.dataSetId" class="input-adjusted"  name="interfaceDataSetId{{$index}}"  ng-required="true"/>
                                                    </div>
                                                    <span id="datasetiderror{{$index}}" class="rnr-form-error" ng-show="!dataset.dataSetId && showError"
                                                          openlmis-message="missing.value"></span>
                                                </div>
                                            </div>
                                            <div class="span2 fluid-grid-cell" ng-show="!dataset.underEdit">
                                                <input type="button" class="btn btn-primary btn-small "
                                                       id="interfaceDataSetEdit{{$index}}"
                                                       ng-click="editInterfaceDatasets($index)"
                                                       openlmis-message="button.edit"/>
                                                <input type="button" class="btn btn-primary btn-small "
                                                       id="interfaceDataSetAdd{{$index}}"
                                                       ng-click="deleteInterfaceDatasets($index)"
                                                       openlmis-message="button.delete"/>
                                            </div>
                                            <div class="span2 fluid-grid-cell" ng-show="dataset.underEdit">
                                                <input type="button" class="btn btn-primary btn-small "
                                                       id="interfaceSave"
                                                       ng-click="saveInterfaceDatasets($index)"
                                                       openlmis-message="button.save"/>
                                                <input id="cancleEditInterfaceDatasets{{$index}}" type="button"
                                                       class="btn btn-small"
                                                       ng-click="cancleEditInterfaceDatasets($index)"
                                                       openlmis-message="button.cancel"/>
                                            </div>
                                        </div>
                                        <div class="row-fluid grid-input-row-grey" tab-scroll>
                                            <div class="span3">
                                                <div class="span12 fluid-grid-cell">
                                                    <div class="position-relative">
                                                        <input type="text" class="input-adjusted" id="interfaceDataSetNameEdit{{$index}}" ng-model="newDataSet.dataSetname" name="interfaceDataSetNameEdit{{$index}}"  ng-required="true"/>
                                                    </div>
                                                    <span id="datasetnameEdit{{$index}}" class="rnr-form-error" ng-show="!newDataSet.dataSetname && showError"
                                                          openlmis-message="missing.value"></span>
                                                </div>
                                            </div>
                                            <div class="span3">
                                                <div class="span8 fluid-grid-cell">
                                                    <div class="position-relative">
                                                        <input class="input-adjusted" type="text" id="interfaceDataSetIdEdit{{$index}}" ng-model="newDataSet.dataSetId"  name="interfaceDataSetIdEdit{{$index}}"  ng-required="true"/>
                                                    </div>
                                                    <span id="datasetidedit{{$index}}" class="rnr-form-error" ng-show="!newDataSet.dataSetId && showError"
                                                          openlmis-message="missing.value"></span>
                                                </div>
                                            </div>
                                            <div class="span2 fluid-grid-cell">
                                                <input type="button" class="btn btn-primary btn-small right-justified"
                                                       id="interfaceDataSetAdd{{$index}}"
                                                       ng-click="addInterfaceDatasets()"
                                                       openlmis-message="button.add"/>
                                            </div>
                                        </div >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Interface dataset section end -->
                    </form>
            </div>
            </div>
        </div>
    </div>
    <div form-toolbar id="action_buttons" class="action-buttons">
        <div class="form-cell button-row">
            <input id="saveButton" type="submit" class="btn btn-primary save-button" openlmis-message="button.save"
                   ng-click="save()"/>
            <input id="cancelButton" type="button" class="btn btn-cancel cancel-button" openlmis-message="button.cancel"
                   ng-click="cancel()"/>
        </div>
        <div class="toolbar-error" id="saveErrorMsgDiv" openlmis-message="error" ng-show="error"></div>
        <div class="toolbar-success" id="saveSuccessMsgDiv" ng-bind="message" ng-show="message"/>    </div>
</div></div>

